<script setup lang="ts">
import loading from '../loading/loading.vue'
const router = useRouter();
const route = useRoute();
import {Session,Local} from '@/utils/storage';
import chat from "@/api/chat";
import {getFindUserInfo} from "@/api/api";
const data = reactive({
  searchData: '',
  navIndex: 0,
  navList: [
    {
      title: '消息中心',
      path: '/home',
      icon: 'xxzx'
    },
    {
      title: '课后评价',
      path: '/classroom',
      icon: 'jrkt'
    },
    {
      title: '班级列表',
      path: '/classList',
      icon: 'bjlb'
    },
    {
      title: '直播课程',
      path: '/liveCourse',
      icon: 'zbkc'
    },
    {
      title: '作业管理',
      path: '/jobManagement',
      icon: 'zygl'
    },
    {
      title: '学生管理',
      path: '/StudentManagement',
      icon: 'xsgl'
    },
    {
      title: '家长管理',
      path: '/patriarch',
      icon: 'xsgl'
    },
    {
      title: '教师管理',
      path: '/TeacherManagement',
      icon: 'jsgl'
    },
    {
      title: '订单管理',
      path: '/OrderManagement',
      icon: 'ddgl'
    },
    {
      title: '排课管理',
      path: '/courseScheduling',
      icon: 'pkgl'
    },
    {
      title: '考勤管理',
      path: '/clockingIn',
      icon: 'kqgl'
    },
    {
      title: '换课管理',
      path: '/changeCourse',
      icon: 'hkgl'
    }
  ],
  userData: {}
});
const navigationFun = (item: object, index: number) => {
  data.navIndex = index;
  router.push({
    path: item.path
  });
};
const getImageUrl = (name: string, select = false) => {
  if (select) return new URL(`./nav/${name}T.png`, import.meta.url);
  else return new URL(`./nav/${name}.png`, import.meta.url);
};
console.log(import.meta);
watch(() => route.path, (newPath, oldPath) => {
  console.log(newPath)
  data.navList.forEach((item, index) => {
    if (item.path === newPath) {
      data.navIndex = index;
      console.log(index)
    }
  })
},{
  immediate: true
});
onMounted(() => {
  getFindUserInfo().then((res:any) => {
    if(res.code === 200){
      data.userData = res.data;
    }
  })
})
const logout = () => {
  // Session.clear()
  // Local.clear()
  Session.remove('ZJ_token')
  Local.remove('ZJ_userInfo')
  // chat.chatLogin(chat.create(false),false)
  router.push({
    path: '/login'
  })
}
const toCalendar = () => {
  router.push({
    path: '/Schedule'
  })
  // router.back()
}
const toBack = () => {
  router.back()
}
</script>
<template>
  <div class="homeBackdrop">
    <div class="my-page-box">
      <!-- 导航 -->
      <div class="my-box-nav">
        <div class="nav-top-logo">
<!--          <loading></loading>-->
<!--          <div style="font-size: 2rem">LOGO</div>-->
          <img style="width: 50%" src="./logo.jpg" alt="">
          <div style="font-size: 20px">助教端</div>
        </div>
        <div class="nav">
          <div v-for="(item, index) of data.navList" :key="index">
            <div class="nav-item" :class="index === data.navIndex ? 'nav-click' : ''"
                 @click="navigationFun(item, index)">
              <div class="nav-item-text">
                <img :src="index === data.navIndex ? getImageUrl(item.icon, true) : getImageUrl(item.icon) " alt=""/>
                <div class="navTitle">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box-content">
        <div class="content-top">
          <div style="display:flex;align-items: center;cursor: pointer" @click="toBack">
<!--            <div class="search" v-if="data.navIndex === 0">-->
              <img style=" margin-left: 10px; width: 1.5rem;height: 1.5rem;" src="./back.png" alt=""/>
<!--              <el-input-->
<!--                  v-model="data.searchData"-->
<!--                  placeholder="请输入手机号码"-->
<!--                  clearable-->
<!--              />-->
<!--            </div>-->
          </div>
          <div style="display: flex; align-items: center">
            <div style="display: flex;align-items: center;margin-right: 20px;cursor: pointer" @click="toCalendar">
              <img style="width: 25px;height: 23px" src="./rili.png" alt=""/>
            </div>
            <div class="user">
              <img style="height: 100%" :src="data.userData.userImg" alt=""/>
            </div>
            <div style="margin: 0 10px; font-size: 16px">{{ data.userData.userNickname }}</div>
                        
            <el-dropdown>
              <img src="@/assets/icon/xai.png" alt=""/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="pages">
          <router-view v-slot="{ Component }">
            <transition name="fade">
              <component :is="Component"/>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.box {
  margin: 0 auto;
  width: 50%;
  height: 100%;
  background: bisque;
}

.fade-enter-from { /* 进入时的透明度为0 和 刚开始进入时的原始位置通过active透明度渐渐变为1 */
  opacity: 0;
  transform: translateX(-100%);
}

.fade-enter-to { /*定义进入完成后的位置 和 透明度 */
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-active, .fade-enter-active {
  transition: all 0.2s ease-out;
}

.fade-leave-from { /* 页面离开时一开始的css样式,离开后为leave-to，经过active渐渐透明 */
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-to { /* 这个是离开后的透明度通过下面的active阶段渐渐变为0 */
  transform: translateX(100%);
  opacity: 0;
}


@media screen and (max-width: 900px) {
  .navTitle {
    display: none;
  }
}

@media screen and (min-width: 1300px) {
  .nav-item-text {
    //width: 50%;
  }
}

.nav-item-text {
  display: flex;
}


::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #189b9e !important;
  font-size: 20px !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #189b9e !important;
  border-color: #189b9e !important;
  font-size: 20px !important;
}

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.homeBackdrop {
  background: url('@/assets/img/backdropHome.jpg') 100%/100% no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .my-page-box {
    width: 94%;
    height: 90%;
    background-color: white;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    box-shadow: 0 0 20px 1px #c0acab;

    .my-box-nav {
      width: 15%;
      //max-width: 300px;
      //min-width: 260px;
      height: 100%;
      background-color: white;
      overflow: auto;
      z-index: 10;
      //box-shadow: 0 0 8px 0 #cdcdcd;
      .nav-top-logo {
        width: 100%;
        height: 150px;
        //background-color: #189b9e;
        color: #a02831;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .nav {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;

        .nav-click {
          background-image: url('@/assets/img/itemIcon.png');
          background-position: 5% 90%;
          background-color: #a02831;
          border-radius: 10px;
          color: white;
          cursor: pointer;
        }

        .nav-item:hover {
          background-color: rgba(160, 40, 49, 0.6);
          border-radius: 10px;
          color: white;
          cursor: pointer;
        }

        .nav-item {
          width: 100%;
          padding: 16px;
          //height: 4rem;
          margin: 5px 0;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }

    .box-content {
      //flex: 1;
      width: 85%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;
      background-color: #f5f5f5;
      padding: 20px;
      box-sizing: border-box;

      .pages {
        flex: 1 0 auto;
        height: 0;
        box-shadow: 0 0 5px 0 #cdcdcd;
        border-radius: 10px;
      }

      .content-top {
        width: 100%;
        padding: 0.5rem;
        box-sizing: border-box;
        border-radius: 10px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1rem;
        box-shadow: 0 0 5px 0 #cdcdcd;;

        .search {
          display: flex;
          align-items: center;

          ::v-deep .el-input__wrapper {
            box-shadow: unset !important;
            background: white;
            height: 45px !important;
            font-size: 16px !important;
            border-radius: 10px !important;
          }

          img {
            margin-left: 10px;
            width: 1.5rem;
            height: 1.5rem;
          }
        }

        .user {
          width: 2.3rem;
          height: 2.3rem;
          border-radius: 50px;
          overflow: hidden;

          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
